import React, { Component } from 'react'

export default class Main extends Component {

  render() {
    const { list, remove, checked, checkedAll, showEdit } = this.props
    return (
      <>
        <section className="main">
          <input
            id="toggle-all"
            className="toggle-all"
            type="checkbox"
            onChange={checkedAll}
          />
          <label htmlFor="toggle-all">Mark all as complete</label>
          <ul className="todo-list">
            {list.map((item) => (
              <li key={item.id} className={item.done ? 'completed' : ''}>
                <div className="view">
                  <input
                    className="toggle"
                    type="checkbox"
                    checked={item.done}
                    onChange={() => {
                      checked(item.id)
                    }}
                  />
                  <label
                    onDoubleClick={() => {
                      showEdit(item.id)
                    }}
                  >
                    {item.title}
                  </label>
                  <button
                    className="destroy"
                    onClick={(id) => {
                      remove(item.id)
                    }}
                  ></button>
                </div>
                <input className="edit" />
              </li>
            ))}
          </ul>
        </section>
      </>
    )
  }
}
